<form [formGroup]="formGroup" class="container">
    <h1 mat-dialog-title class="dialog-title" mat-dialog-draggable>{{'dlg.docproperty-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <mat-tab-group style="width: 100%;">
        <mat-tab label="{{'gauges.property-props' | translate}}">
            <div class="mat-tab-container property-container">
                <div class="my-form-field item-block">
                    <span>{{'dlg.docproperty-name' | translate}}</span>
                    <input formControlName="name" type="text">
                </div>
                <div class="my-form-field item-block mt5">
                    <span>{{'dlg.docproperty-type' | translate}}</span>
                    <mat-select formControlName="type" placeholder="{{'dlg.doctype' | translate}}">
                        <mat-option [value]="viewType.svg">{{'editor.view-svg' | translate}}</mat-option>
                        <mat-option [value]="viewType.cards">{{'editor.view-cards' | translate}}</mat-option>
                        <mat-option [value]="viewType.maps">{{'editor.view-maps' | translate}}</mat-option>
                    </mat-select>
                </div>
                <div *ngIf="formGroup.controls.type?.value === viewType.svg">
                    <div class="block mt5">
                        <div class="my-form-field inbk">
                            <span>{{'dlg.docproperty-width' | translate}}</span>
                            <input numberOnly formControlName="width" style="width: 120px" type="number">
                        </div>
                        <div class="my-form-field" style="float: right">
                            <span>{{'dlg.docproperty-height' | translate}}</span>
                            <input numberOnly formControlName="height" style="width: 120px" type="number">
                        </div>
                    </div>
                    <div class="my-form-field item-block mt5">
                        <span>{{'dlg.docproperty-size' | translate}}</span>
                        <mat-select placeholder="{{'dlg.docproperty-select' | translate}}"
                            (selectionChange)="onSizeChange($event.value)">
                            <mat-option *ngFor="let prop of propSizeType" [value]="prop.value">
                                {{ prop.text }}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field item-block mt5">
                        <span>{{'dlg.docproperty-align' | translate}}</span>
                        <mat-select formControlName="align"
                            placeholder="{{'dlg.docproperty-align-placeholder' | translate}}">
                            <mat-option *ngFor="let align of alignType | enumToArray" [value]="align.key">
                                {{'dlg.docproperty-align-' + align.value | translate}}
                            </mat-option>
                        </mat-select>
                    </div>
                </div>
                <div *ngIf="formGroup.controls.type?.value === viewType.cards">
                    <div class="my-form-field inbk mt5" style="width: 160px">
                        <span>{{'dlg.docproperty-gridtype' | translate}}</span>
                        <mat-select formControlName="gridType"
                            placeholder="{{'dlg.docproperty-gridtype-placeholder' | translate}}">
                            <mat-option *ngFor="let type of gridType | enumToArray" [value]="type.value">
                                {{'dlg.docproperty-gridtype-' + type.value | translate}}
                            </mat-option>
                        </mat-select>
                    </div>
                    <div class="my-form-field inbk mt5 ftr">
                        <span>{{'dlg.docproperty-margin' | translate}}</span>
                        <input numberOnly formControlName="margin" [max]="20" [min]="0" [step]="1" style="width: 100px"
                            type="number">
                    </div>
                </div>
                <div *ngIf="formGroup.controls.type?.value !== viewType.maps" class="my-form-field item-block mt5">
                    <span>{{'dlg.docproperty-background' | translate}}</span>
                    <input style="width: 292px; border: 1px solid rgba(0,0,0,0.2); height:15px !important" readonly
                        [(colorPicker)]="data.profile.bkcolor" class="input-color" title="Change stroke color"
                        [style.background]="data.profile.bkcolor" [cpPresetColors]="defaultColor"
                        [cpAlphaChannel]="'always'" [cpPosition]="'bottom'" [value]="data.profile.bkcolor"
                        [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
                        [cpCancelButtonText]="'Cancel'" [cpOKButton]="true" [cpOKButtonText]="'OK'"
                        [cpOKButtonClass]="'cpOKButtonClass'" />
                </div>
            </div>
        </mat-tab>

        <mat-tab label="{{'gauges.property-events' | translate}}" #tabEvents>
            <div class="mat-tab-container">
                <div class="toolbox">
                    <button mat-icon-button (click)="onAddEvent()"
                        matTooltip="{{'gauges.property-tooltip-add-event' | translate}}">
                        <mat-icon>add_circle_outline</mat-icon>
                    </button>
                </div>
                <div mat-dialog-content style="overflow: visible; width:100%;">
                    <flex-event [data]="data" [property]="data.property"
                        [scripts]="scripts" #flexevent style="padding-bottom: 5px"></flex-event>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>

    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">
            {{'dlg.cancel' | translate}}
        </button>
        <button mat-raised-button [disabled]="formGroup.invalid" color="primary" (click)="onOkClick()">
            {{'dlg.ok' | translate}}
        </button>
    </div>
</form>